<template>
    <view>
        <!-- 没加入社团时的提示 -->
        <view v-if="userinfo.society_id === '0'"><NoSociety /></view>
        <!-- 进行中的活动列表 -->
        <view v-else class="fs-white p-30">
            <!-- 没有正在进行中的活动的提示 -->
            <view class="fs-50 fs-strong" v-if="processingActivities.length < 1">暂无进行中的活动</view>
            <view v-else>
                <Acard pad="10px" style="margin-left: -80px;" class="mb-15" bgFilter>
                    <view class="flex flex-row flex-nowrap flex-justify-end">
                        <view class="lightBlueLine"></view>
                        <view class="fs-48 nbg">正在进行中的活动</view>
                    </view>
                </Acard>

                <view class="space-y-10">
                    <Acard v-for="activity in processingActivities" :key="activity.id" pad="10px 15px" bgFilter>
                        <view class="flex flex-justify-between flex-row flex-nowrap">
                            <!-- 活动信息 -->
                            <view class="flex flex-column justify-between">
                                <view class="fs-12 fs-gray flex flex-column">
                                     <text class="font-18 text-white">{{ activity.title }}</text>
                                    {{ $u.timeFormat(activity.start_time, 'hh:MM:ss') }}~{{$u.timeFormat(activity.end_time, 'hh:MM:ss')}}
                                </view>
                                <view>
                                    <text v-if="activity.informs.length<1">无通知</text>
                                    <button v-else size="mini" @click="showInform.informs = activity.informs;showInform.overlay=true">查看通知</button>
                                </view>
                            </view>
                            <!-- 活动签到信息 -->
                            <view class="flex flex-column flex-nowrap justify-between fs-center">
                                <view class="nbg mb-5 w-100">{{ activity.signin == 0 ? '未签到' : '已签到' }}</view>
                                <view v-if="activity.signin_require == 0" class="nbg">不需要签到</view>
                                <view v-else>
                                    <button class="w-100 mt-5" @click="signin(activity.id)" size="mini" :disabled="activity.signin != '0'">
                                        {{ activity.signin == 0 ? '签 到' : '已签到' }}
                                    </button>
                                </view>
                            </view>
                        </view>
                    </Acard>
                </view>
            </view>
            
            <!-- 显示通知的遮罩层 -->
            <u-overlay :show="showInform.overlay" @click="showInform.overlay = false" opacity="0.8">
                <view v-show="showInform.informs.length>0" class="p-30">
                    <Acard v-for="inform in showInform.informs" pad="10px">
                        <template>
                            <view>{{inform.title}}</view>
                            <view>发布时间：{{$u.timeFormat(inform.creationTime,'hh:MM:ss')}}</view>
                            <view>内容：{{inform.overview}}</view>
                        </template>
                    </Acard>
                </view>
            </u-overlay>
            <!-- 显示通知的遮罩层 end-->
        </view>
        <ParticleBackground></ParticleBackground>
        <Tabbar></Tabbar>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'Processing',
    data() {
        return {
            showInform:{
                overlay:false,
                informs:[]
            }
        };
    },
    mounted() {
        this.getProcessingActivites();
    },
    computed: {
        ...mapState('user', ['userinfo']),
        ...mapState('activity', ['processingActivities'])
    },
    methods: {
        getProcessingActivites() {
            this.$store.dispatch('activity/getProcessiongActivities', {
                timestamp: Date.now(),
                user_id: this.userinfo.id
            });
        },
        // 活动签到
        async signin(activity_id) {
            let code = await this.$store.dispatch('activity/signin', {
                user_id: this.userinfo.id,
                activity_id,
                timestamp: Date.now()
            });
            if (code === 200) {
                this.getProcessingActivites();
                uni.showToast({
                    title: '签到成功',
                    icon: 'success'
                });
            }
        }
    }
};
</script>

<style scoped lang="scss">
.nbg {
    background: rgba(26, 26, 26, 0.5);
    overflow: hidden;
    clip-path: polygon(
        6px 0px,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px),
        0 6px
    );
    // height: 32px;
    box-sizing: border-box;
    padding: 5px 16px;
    margin-right: 6px;
}
.lightBlueLine {
    margin-right: 10rpx;
    width: 6px;
    height: 40px;
    background: #9bd2bd;
    border-radius: 3px;
    box-shadow: 0 0 10px rgb(155, 210, 189);
    animation: FpulseSlowB infinite alternate 1s linear;
}
</style>
